<template>
    <el-descriptions title="个人中心" direction="vertical" style="margin-top: 20px;" border>
        <el-descriptions-item :rowspan="2" :width="140" label="头像" align="center">
            <el-image style="width: 100px; height: 100px"
                :src="`http://localhost/storage/${store.state.user.avatar}`" />
        </el-descriptions-item>
        <el-descriptions-item label="用户名"> {{ $store.state.user.username }}</el-descriptions-item>
        <el-descriptions-item label="性别"> {{ $store.state.user.sex }}</el-descriptions-item>
        <el-descriptions-item label="手机号"> {{ $store.state.user.phone }}</el-descriptions-item>
        <el-descriptions-item label="上次登陆时间">
            {{ $store.state.user.last_login_time }}
        </el-descriptions-item>
        <el-descriptions-item label="个性签名">
            <p class="signature"> {{ $store.state.user.signature }}</p>
        </el-descriptions-item>
    </el-descriptions>
</template>

<script setup>
import { useStore } from 'vuex';

const store = useStore();
</script>

<style scoped>
.signature {
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    font-family: 'Pacifico', cursive;
    /* 更改为更具特色的字体 */
    color: #333;
    /* 圆角边框 */
    letter-spacing: 0.1em;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    /* 调整阴影效果 */
}
</style>